<template>
  <div>
    <div class="box">
      <div @click="fun()">{{ text[1] }}</div>
      <div>{{ text[0] }}</div>
      <div>{{ text[2] }}</div>
    </div>
    <div class="null"></div>
    <div class="box1">
      <img :src="img[0]" alt="" />
    </div>
    <div class="box2">
      <div>
        <img :src="img[1]" alt="" />
        <h3>官方认证</h3>
        <p>国家医保局监制</p>
      </div>
      <div>
        <img :src="img[2]" alt="" />
        <h3>就医方便</h3>
        <p>就医购药不用卡</p>
      </div>
      <div>
        <img :src="img[3]" alt="" />
        <h3>安全放心</h3>
        <p>建行安全保障</p>
      </div>
    </div>
    <div class="box3">
      <h3>医保电子凭证是什么?</h3>
      <p>
        医保电子凭证是国家医疗保障局为医保相关的参保人、参保单位、管理人员、经办人员、医护人员、定点医药机构、医药企业等在全国统一的医保信息平台中颁发的统一标识信息。医保电子凭证是基于医保基础信息库为全体参保人员生成的医保身份识别电子介质，不依托实体卡，可与身份证、二维码、生物特征等相关联，支持所有医保相关业务，全国通用，跨渠道通用。
      </p>
    </div>
    <div class="box3">
      <h3>医保电子凭证可以做什么?</h3>
      <p>
        参保人可通过医保电子凭证享受在线医疗保障服务，办理医保各类线上业务。
      </p>
      <div>
        <div>
          <img :src="img[4]" alt="" />
          <h3>医院挂号</h3>
        </div>
        <div>
          <img :src="img[5]" alt="" />
          <h3>医保购药</h3>
        </div>
        <div>
          <img :src="img[6]" alt="" />
          <h3>医保缴费</h3>
        </div>
        <div>
          <img :src="img[7]" alt="" />
          <h3>医保查询</h3>
        </div>
      </div>
    </div>
    <div class="box3">
      <h3>医保电子凭证如何使用</h3>
      <p>可从手机银行-悦享生活-更多-医疗健康，点击“医保电子凭证”进入。</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ["医保电子凭证", "<", "X"],
      img: [
        "./img/life/yibao/yibao01 (1).png",
        "./img/life/yibao/yibao01 (2).png",
        "./img/life/yibao/yibao01 (3).png",
        "./img/life/yibao/yibao01 (4).png",
        "./img/life/yibao/yibao01 (5).png",
        "./img/life/yibao/yibao01 (6).png",
        "./img/life/yibao/yibao01 (7).png",
        "./img/life/yibao/yibao01 (8).png",
      ],
    };
  },
  methods: {
    fun() {
      this.$router.push("/life");
    },
  },
};
</script>

<style lang="scss" scoped>
.null {
  width: 100%;
  height: 0.5rem;
}
.box {
  width: 100%;
  line-height: 0.5rem;
  display: flex;
  justify-content: space-between;
  height: 0.5rem;
  text-align: center;
  position: fixed;
  top: 0px;
  background-color: skyblue;
  > div:nth-child(2n-1) {
    width: 0.4rem;
    padding: 0 0.1rem;
  }
}
.box1 {
  width: 100%;
  > img {
    width: 100%;
  }
}
.box2 {
  width: 100%;
  display: flex;
  justify-content: space-around;
  text-align: center;
  > div {
    width: 1rem;
    > img {
      width: 0.5rem;
    }
    > h3 {
      font-size: 0.16rem;
      font-weight: 800;
    }
    > p {
      font-size: 0.12rem;
      color: #999;
    }
  }
}
.box3 {
  width: 100%;
  > h3 {
    font-size: 0.18rem;
    text-align: center;
    font-weight: 800;
    margin: 0.2rem 0rem;
    background-color: #eee;
    line-height: 0.5rem;
  }
  > p {
    margin: auto;
    width: 90%;
    font-size: 0.14rem;
    color: #999;
    line-height: 0.3rem;
    margin-bottom: 0.1rem;
  }
  > div {
    width: 100%;
    display: flex;
    justify-content: space-around;
    text-align: center;
    > div {
      width: 25%;
      > img {
        width: 0.5rem;
      }
      > h3 {
        font-size: 0.16rem;
        font-weight: 800;
      }
    }
  }
}
</style>